﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery点击弹出下拉框选择日期代码 - 站长素材</title>

<link rel="stylesheet" href="css/jHsDate.css" />
<style>
	input {
		height: 20px;
		padding: 5px;
		width: 400px;
		border: 1px solid #3ab2d0;
	}
</style>

</head>
<body>

<div style="text-align:center;margin-top:50px;">
	<span>普通年月日选择</span>
	<input type="text" id="date" />
</div>
<div style="text-align:center;margin-top:50px;">
	<span>只显示时间选择</span>
	<input type="text" id="time" />
</div>
<div style="text-align:center;margin-top:50px;">
	<span>时间日期格式化</span>
	<input type="text" id="datetimeformat" />
</div>
<div style="text-align:center;margin-top:50px;">
	<span>设置默认日期并显示</span>
	<input type="text" id="datetimedef" />
</div>
<div style="text-align:center;margin-top:50px;">
	<span>只读input</span>
	<input type="text" id="dateread" />
</div>
<div style="text-align:center;margin-top:50px;">
	<span>日期范围</span>
	<input type="text" id="datemaxmin" />
</div>
<div style="text-align:center;margin-top:50px;">
	<span>回掉函数</span>
	<input type="text" id="datecallback" />
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jHsDate.js"></script>
<script type="text/javascript">
$('#date').jHsDate();
$('#time').jHsDate({
format:'hh:mm'
});
$('#datetimeformat').jHsDate({
format: 'yyyy年MM月dd日 hh时mm分'
});
$('#datetimedef').jHsDate({
defDate: '2017-01-01',
defIsShow: true
});
$('#dateread').jHsDate({
inputIsRead: true
});
$('#datemaxmin').jHsDate({
minDate: '2010-01-01',
maxDate: '2017-05-31'
});
$('#datecallback').jHsDate({
callBack: function () {
	alert('我是回掉函数')
}
});
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
